<template>
    <div class="wrapper video">
        <mt-header title="视频" mtClass="no-bg" leftName="no" @refreshVideo="refreshVideo"/>
        <div class="video-inner" ref="scrollDiv" v-infinite-scroll="loadBottomAjax" infinite-scroll-disabled="bottomLock" infinite-scroll-distance="10" infinite-scroll-immediate-check="false">
            <!-- 请求提示 -->
            <my-loading :visible="loading" :reload="init" :absolute="false"/>
            
            <!-- 顶部提示 -->
            <div class="globalTip">
                <div class="dataCount">已为你推荐{{dataCount}}条新内容</div>
                <div class="noNewData">已为您更新到最新内容</div>
                <div class="requestFail">网络请求失败,请检查网络</div>
            </div>

            <!-- 下拉加载 -->
            <mt-loadmore :top-method="loadTopAjax" @top-status-change="handleTopChange" ref="loadmore" :auto-fill='false'>
                <!-- 下拉提示 -->
                <div slot="top" class="mint-loadmore-top">
                    <span v-show="topStatus == 'pull'"><img class='pullLoading' src="~@/assets/loading.png"> 下拉刷新↓</span>
                    <span v-show="topStatus == 'drop'"><img class='pullLoading' src="~@/assets/loading.png"> 释放更新↑</span>
                    <span v-show="topStatus == 'loading'"><img class='pullLoading animate' src="~@/assets/loading.png"> 加载中...</span>
                </div>
                <!-- videoItem --> 
                <video-item :itemJson="videoList" v-if='videoList.length > 0' @sendCurVideoIndex="sendCurVideoIndex"/>
                <!-- 底部提示 -->
                <div class="bottomLoad" v-if="videoList.length > 0">
                    <div class="loading" v-show='bottomLoading'>加载中...</div>
                    <div class="noData" v-if='bottomNoData'>没有更多的内容了</div>
                </div>
            </mt-loadmore>
        </div>
        <ball name="视频收益"/>
        <tabbar />
    </div>
</template>

<script>
import { mapMutations, mapActions } from 'vuex'
import mtHeader from "@/components/Header"
import ball from "@/components/Ball/index"
import tabbar from "@/components/Tabbar/index"
import myLoading from '@/components/loading'
import videoItem from "./components/videoItem"
export default {
    name: 'file',
    data(){
        return {
            page: 1,                  // 当前栏目的翻页页数
            videoId: '',              // 当前数据列表的第一条新闻的ID 用以判断当前是否有新闻更新
            videoList: [],
            dataCount: 0,           // 推荐文章数量
            topStatus: '',          // 下拉状态
            bottomLock: false,      // 上滑开关
            bottomLoading: true,    // 底部loading
            bottomNoData: false,    // 底部nothing
            loading: false,
            videoLocation: ''
        }
    },
    components:{
        mtHeader,
        ball,
        tabbar,
        myLoading,
        videoItem
    },
    mounted(){
        this.init();
    },
    activated(){
        this.getScroll()
    },
    watch: {
        videoList(val) {
            this.set_videoList(val)
        }
    },
    methods:{
        ...mapMutations('user', [
            'set_DLBvalue'
        ]),
        ...mapMutations('video', [
            'set_videoList',
            'set_videoLocation'
        ]),
        ...mapActions('video', [
            'get_videoList_cache',
            'get_videoList_data',
            'get_videoLocation_cache'
        ]),
        init(){
            this.loading = 'loading'
            // 视频列表的缓存？缓存 : 发送请求
            this.get_videoList_cache(this.page,this.videoId)
            .then(res => {
                if (res && res.length>0) {
                    this.videoList = res
                    this.videoId = res[0].videoId
                    this.loading = false
                } else {
                    this.loadTopAjax()
                }
            })
        },
        // 顶部下拉请求
        loadTopAjax() {
            this.bottomLock = false;      // 上滑开关
            this.bottomLoading = true;    // 底部loading
            this.bottomNoData = false;   // 底部nothing
            $('.videoItem .bottom').show();  //上拉刷新时显示所有的视频信息
            this.page = 1;
            this.get_videoList_data({
                page: this.page,
                videoId:this.videoId
            }).then(res => {
                this.loading = false
                if( res.dataList ){
                    this.videoList = res.dataList;
                    this.videoId = this.videoList[0].videoId
                    this.dataCount = res.refreshNumber
                    this.page++
                }
                // 只有一页
                if( res.lastPage ){
                    this.bottomLock = true
                    this.bottomLoading = false
                    this.bottomNoData = true
                }
                if( res.refreshNumber >= 1 ){
                    // 文章数量提示
                    $('.video .dataCount').slideDown(200).delay(1000).slideUp(200)
                }else{
                    // 没有文章数据提示
                    $('.video .noNewData').slideDown(200).delay(1000).slideUp(200)
                }
                this.$refs.loadmore.onTopLoaded()   // mint-ui 下拉组件的方法
                this.loading = false
                $('.video .requestFail').hide()
            })
            .catch(err => {
                console.log('loadTop发生错误', err)
                if (this.videoList.length > 0) {
                    $('.video .requestFail').show()
                    setTimeout(()=>{
                        this.loading = false
                        $('.video .requestFail').hide()
                    },1000)
                } else {
                   this.loading = 'error'
                }
                this.topStatus = ''
                this.$refs.loadmore.onTopLoaded()
            })
        },
        // 底部上滑请求
        loadBottomAjax () {
            this.bottomLock = true  // 上滑开关
            this.get_videoList_data({
                page: this.page,
                videoId:''
            }).then(res => {
                if (res.dataList) {
                    this.videoList.push(...res.dataList)
                    this.page++
                }
                // 已经是最后一页了
                if( res.lastPage ){
                    this.bottomLoading = false
                    this.bottomNoData = true
                    this.bottomLock = true
                }else{
                    this.bottomLock = false
                }
            })
        },
        // mint-ui 下拉组件的状态
        handleTopChange(status) {
            this.topStatus = status
        },
        paly(i){
          this.$showPlay(this.$refs.move[i],i); //动态调用视频播放组件
        },
        sendCurVideoIndex(type,id){
            // console.log(type,id)
            // 监控一次只能播放一个视频
            var videos = document.getElementsByTagName('video');
            for (var i = videos.length - 1; i >= 0; i--) {
                (function(){
                    var p = i;
                    videos[p].addEventListener('play',function(){
                        pauseAll(p);
                    })
                })()
            }
            function pauseAll(index){
                for (var j = videos.length - 1; j >= 0; j--) {
                    if (j!=index) videos[j].pause();
                }
            };
        },
        handleVideo() {
            // 监控滚动事件，将滚出视口的视频暂停播放
            var videoList = $('video');
            var wHeigt = window.innerHeight;
            for(var i = 0; i < videoList.length; i++){
                var v = videoList[i];
                v.height = $(v).height();
                v.top = $(v).offset().top;
            }
            var sTop = $(document).scrollTop();
            var hasPlay = false;
            for(var i = 0; i < videoList.length; i++){
                var v = videoList[i];
                if( v.top + v.height < sTop ){
                    v.pause();
                }
            }
        },
        saveScroll(){
            let scrollTop = $('.video .video-inner').scrollTop()
            if (scrollTop >= 0) {
                this.set_videoLocation(scrollTop)
            }
            this.handleVideo()
        },
        getScroll(){
            this.get_videoLocation_cache().then(res => {
                this.videoLocation = res
                if (this.videoLocation >= 0) {
                    $('.video .video-inner').animate({scrollTop: this.videoLocation},0)
                }
                this.$refs.scrollDiv.addEventListener('scroll', this.saveScroll)
            })
        },
        refreshVideo(){
            //header点击刷新video列表
            this.videoList = [];
            this.loadTopAjax()
        }
    },
    deactivated() {
        this.$refs.scrollDiv.removeEventListener('scroll', this.saveScroll)
    },
    beforeRouteLeave(to,from,next) {
        this.set_DLBvalue(0)
        next()
    }
}
</script>

<style lang="stylus" scoped>
.video{
    height:100%;
    .video-inner{
        height:100%;
        padding-top:50px;
        padding-bottom:55px;
        overflow:scroll;
        position: relative;
        /*解决ios上滑动不流畅*/
        -webkit-overflow-scrolling: touch;
        .globalTip{
            position: absolute;
            top: 50px;
            left: 0;
            right: 0;
            z-index: 999;
            div{
                height: 32px;
                line-height: 34px;
                font-size: 14px;
                color: #5f88ff;
                background: rgba(213, 233, 247, .8);
                text-align: center;
                display: none;
                &.requestFail {
                    color: #d06e6e;
                    background: #FBE9EF;
                }
            }
        }
        .mint-loadmore-top {
            height: 50px;
            line-height: 50px;
            font-size: 14px;
            color: #999;
        }
        .pullLoading{
            width: 20px;
            height: 20px;
            vertical-align: middle;
            display:inline-block;
            &.animate{
                -webkit-animation:change 2s linear infinite;
            }
        }
        .bottomLoad{
            width: 100%;
            position: relative;
            div{
                width: 100%;
                height: 40px;
                line-height: 40px;
                text-align: center;
                font-size: 14px;
                color: #999;
            }
        }
    }
}
@-webkit-keyframes change{
　　0%{-webkit-transform:rotate(0deg);}
　　50%{-webkit-transform:rotate(180deg);}
　　100%{-webkit-transform:rotate(360deg);}
}
</style>